<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="title">合同编号</div>
        <div class="inputBox">
          <el-input v-model="contractNumber" @keyup.enter.native="getList(1)"></el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">合同名称</div>
        <div class="inputBox">
          <el-input v-model="contractName" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>
      <!-- 查询 -->
      <div class="Btn_grounp">
        <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search" @click="getList(1)">查询</el-button>
        <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        <!-- <el-button class="searchBtn" style="margin-left: 0" type="primary" size="small" icon="el-icon-plus"
          @click="showAddDialog(1)">新增</el-button> -->
      </div>
    </div>
    <!--  列表界面  -->
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table">
          <el-table-column align="center" prop="serialNumber" label="序号"></el-table-column>
          <el-table-column align="center" prop="" label="合同状态" min-width="112">
            <template slot-scope="scope">
              <div class="tag" v-if="scope.row.contractType.value === 1">
                <div class="dian"></div>
                <div class="text">合同执行中</div>
              </div>
              <div class="tag grey" v-if="scope.row.contractType.value === 2">
                <div class="dian" style="color: #a8b0b6"></div>
                <div class="text">合同已到期</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="contractNumber" label="合同编号"></el-table-column>
          <el-table-column align="center" prop="contractingPartyType" label="合同类型"></el-table-column>
          <el-table-column align="center" prop="projectName" label="项目名称">
            <template slot-scope="scope">
              {{ scope.row.projectName || '无' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="合同期限">
            <template slot-scope="scope">
              <div>
                {{ scope.row.contractPeriod + scope.row.contractPeriodUnit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" @click="
                  $router.push(
                    '/home/contractManagement/Detail/' + scope.row.contractId
                  )
                  ">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
              共{{ data.total }}条,每页{{ data.size }}条
            </span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 编辑（复用新增）合同弹窗 -->
    <el-dialog class="dialog" :title="dialogName" :visible.sync="visibleAddBox" width="840px">
      <el-form ref="addContractForm" :model="addContractForm" :rules="addContractRules" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="货源方" prop="cargoOwnerName">
              <el-select v-model="addContractForm.cargoOwnerName" filterable remote reserve-keyword loading-text="正在搜索中"
                @change="changeName" style="width: 100%" placeholder="请选择内容" :remote-method="remoteSearch"
                :loading="loading">
                <el-option v-for="item in cargoOwnerNameArr" :key="item.index" :label="item.name"
                  :value="item.ownerId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input v-model="addContractForm.contractNum" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="addContractForm.projectName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="addContractForm.contractName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计费标准" prop="charging">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.charging" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.chargingUnit"
                  :placeholder="addContractForm.chargingUnit">
                  <el-option v-for="item in WeightArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算账期" prop="settlementPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.settle" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.settleUnit"
                  :placeholder="addContractForm.settleUnit">
                  <el-option v-for="item in timeArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select v-model="addContractForm.invoiceType" style="width: 100%" placeholder="请选择内容">
                <el-option v-for="item in invoiceArr" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税率" prop="taxRate">
              <el-input v-model="addContractForm.invoiceRatio" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  %
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.period" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.periodUnit"
                  :placeholder="addContractForm.periodUnit">
                  <el-option v-for="item in termArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金" prop="earnestMoney">
              <el-input v-model="addContractForm.earnestMoney" class="append_unit">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同开始日期" prop="contractStartTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.startDate" type="date" placeholder="选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractEndTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.endDate" type="date" placeholder="选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同附件" prop="signImage">
              <el-upload class="upload" :action="url" :on-preview="handlePreview" ref="uploadRef"
                :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :file-list="fileList"
                :on-exceed="handleExceed" :on-success="uploadFileSuccess" :headers="headers" :auto-upload="true">
                <el-button size="small" class="uploadBtn" type="primary">上传文件</el-button>
                <span slot="tip" class="el-upload__tip">支持PDF、JPG等格式</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同备注" prop="contractRemarks" class="notes" placeholder="请输入内容">
              <el-input v-model="addContractForm.remark" resize="none" :rows="3" type="textarea" maxlength="200"
                show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="visibleAddBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="cofime()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";

export default {
  data() {
    return {
      contractNumber: "", //合同编号
      contractName: "", //合同名称
      //列表数据；要有假数据，否则报错
      records: [],
      data: {
        total: "0",
        size: "0",
      },
      pageCurrent: "1", //当前分页
      pageCount: "1", //页面容量
      visibleAddBox: false,
      contractDetail: {}, //从服务器获取的合同详情数据
      dialogName: "新增合同",
      //货主合同编辑
      addContractForm: {
        cargoId: "",
        cargoOwnerName: "",
        contractId: "", //可选项，有该项则表示新增
        contractNum: "",
        projectName: "", //对应货主合同名称
        contractName: "",
        charging: "",
        chargingUnit: "",
        settle: "",
        settleUnit: "",
        invoiceType: "",
        invoiceRatio: "",
        period: "",
        periodUnit: "",
        earnestMoney: "",
        startDate: "",
        endDate: "",
        fileUrls: "ssssssss",
        remark: "",
      },
      //数据校验规则
      addContractRules: {
        cargoOwnerName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        contractNum: [{ required: true, message: "不能为空", trigger: "blur" }],
        projectName: [{ required: true, message: "不能为空", trigger: "blur" }],
        contractName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        charging: [{ required: true, message: "不能为空", trigger: "blur" }],
        settle: [{ required: true, message: "不能为空", trigger: "blur" }],
        period: [{ required: true, message: "不能为空", trigger: "blur" }],
        periodUnit: [{ required: true, message: "不能为空", trigger: "blur" }],
        startDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        endDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceType: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceRatio: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        earnestMoney: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",
      WeightArr: [
        // 计费标准选项
        { value: "吨", label: "吨" },
        { value: "千克", label: "千克" },
      ],
      WeightValue: "吨",
      timeArr: [
        // 结算周期选项
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      timeValue: "月",
      // invoiceArr: [ // 发票类型选择
      //     { value: "普票", label: "普票" },
      //     { value: "专票", label: "专票" }
      // ],
      invoiceArr: [
        // 发票类型选择
        { value: 0, label: "无需开票" },
        { value: 1, label: "电子发票" },
        { value: 2, label: "增值税专用发票" },
        { value: 3, label: "普通发票" },
      ],
      invoiceValue: "年",
      termArr: [
        // 合同期限 选择
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      termValue: "年",
      loading: false,
      names: [], //获取的全部货主名称列表
      cargoOwnerNameArr: [
        //匹配的货主名称列表
        { index: 1, ownerId: "1", name: "唐洪飞" },
        { index: 2, ownerId: "2", name: "周杰伦" },
      ],
      fileList: [],
    };
  },
  watch: {
    fileName(old, set) {
      ////console.log("fileName=" + this.fileName);
    },
  },
  methods: {
    changePages(val) {
      this.pageCurrent = val;
      this.getList();
    },
    getSerialNumber(arr) {
      // 前端解决序号
      arr.forEach((item, i) => {
        let num = i + 1;
        item.serialNumber = num;
      });
    },
    getList(current) {
      let params = {};
      if (this.contractNumber.length != 0)
        params.contractNumber = this.contractNumber;
      if (this.contractName.length != 0)
        params.contractName = this.contractName;
      if (this.pageCurrent != 0) params.pageNo = current || this.pageCurrent;
      if (this.pageCount.length != 0) params.pageCount = this.pageCount;
      let v = this;
      ////console.log("params=" + JSON.stringify(params));
      httpApi.contractManagementApi
        .getCargoOwnerContractList(params)
        .then((res) => {
          ////console.log("getCargoOwnerContractList=", res);
          if (res.data.code == 500) {
            return;
          }
          this.data = res.data.data;
          this.records = res.data.data.records;
          this.getSerialNumber(this.records);
          //如果当前页面超过请求范围，则重新请求
          if (this.pageCurrent > this.data.pages) {
            this.pageCurrent = this.data.pages;
            this.getList();
          }
          ////console.log(this.records);
        });
    },
    /*     deleteCargoContract(id) {
                let v = this
                let tmp = {
                    "contractId": id
                }
                httpApi.contractManagementApi.delCargoContract(tmp).then(function (rsp) {
                    ////console.log(JSON.stringify(rsp.data))
                    if (rsp.data.code == "200") {
                        v.getList()
                    } else {
                        // ////console.log("删除合同操作失败")
                    }
                })
            }, */
    deleteCargoContract(contractId) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求
          let params = {
            contractId: contractId,
          };
          httpApi.contractManagementApi.delCargoContract(params).then((res) => {
            ////console.log("删除结果", res);
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取回填表单数据
    getDetail(id) {
      ////console.log("contractId=" + id);
      let v = this;
      let tmp = {
        contractId: id,
      };
      httpApi.contractManagementApi
        .getCargoOwnerContractDetails(tmp)
        .then(function (rsp) {
          let dat = rsp.data.data;
          // ////console.log("货主合同信息获取完毕")
          v.addContractForm.cargoId = dat.contractingPartyId + "";
          v.addContractForm.cargoOwnerName = dat.cargoName;
          v.addContractForm.contractId = id + "";
          v.addContractForm.contractNum = dat.contractNumber;
          v.addContractForm.projectName = dat.projectName;
          v.addContractForm.contractName = dat.contractName;
          v.addContractForm.charging = dat.charging;
          v.addContractForm.chargingUnit = dat.chargingUnit;
          v.addContractForm.settle = dat.settlementPeriod;
          v.addContractForm.settleUnit = dat.settlementPeriodUnit;
          v.addContractForm.invoiceType = v.invoiceArr[dat.invoiceType].value;
          v.addContractForm.invoiceRatio = dat.taxRate;
          v.addContractForm.period = dat.contractPeriod;
          v.addContractForm.periodUnit = dat.contractPeriodUnit;
          v.addContractForm.earnestMoney = dat.earnestMoney;
          v.addContractForm.startDate = dat.contractStartTime;
          v.addContractForm.endDate = dat.contractEndTime;
          v.addContractForm.fileUrls = dat.signImage;
          v.addContractForm.remark = dat.contractRemarks;
          //更改文件名列表
          let tmp = {
            name: dat.signImage.split("/")[dat.signImage.split("/").length - 1],
            url: dat.signImage,
          };
          v.fileList.length = 0;
          v.fileList.push(tmp);
          ////console.log(v.addContractForm);
          //如果是新增，则跳过货主名赋值
          if (
            v.addContractForm.cargoId == null ||
            v.addContractForm.cargoId == undefined ||
            v.addContractForm.cargoId == ""
          )
            return;
          // ////console.log("搜索指定的货主姓名")
          for (let item of v.names) {
            if (item.id == v.addContractForm.cargoId) {
              v.addContractForm.cargoOwnerName = item.name;
              ////console.log("已找到货主名称");
              return;
            }
          }
          ////console.log("未找到指定货主的名称");
        });
    },
    CleanUp() {
      (this.contractNumber = ""), (this.contractName = "");
      this.getList(1)
    },
    //提交合同信息
    cofime() {
      // this.addContractForm.fileUrls = "ssssss"
      let v = this;
      ////console.log("addContractForm=" + JSON.stringify(this.addContractForm));
      httpApi.contractManagementApi
        .editCargoContractInfo(this.addContractForm)
        .then(function (rsp) {
          ////console.log(JSON.stringify(rsp.data));
          if (rsp.data.code == 200) {
            v.$message.success("操作成功");
            v.getList();
          }
        });
      this.visibleAddBox = false;
    },
    handleRemove(file, fileList) {
      ////console.log(file, fileList);
    },
    //点击文件列表中的文件，下载到本地
    handlePreview(file) {
      ////console.log("下载的文件信息=", file);
      window.location.href = file.url;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    //文件移除响应
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //文件上传成功响应
    uploadFileSuccess(response, file, fileList) {
      this.addContractForm.fileUrls = response.data.url;
      this.fileList.length = 0;
      this.fileList.push(response.data);
      ////console.log("this.files=", this.fileList);
    },
    // 新增/编辑弹窗
    showAddDialog(mode) {
      if (mode == 1) {
        //新增模式
        this.dialogName = "新增合同";
        //只清空合同ID，用于测试
        this.addContractForm.contractId = "";
        //清空全部表单属性
        for (let item in this.addContractForm) {
          this.addContractForm[item] = "";
        }
        //重设表单单位属性
        this.addContractForm.chargingUnit = this.WeightArr[0].value;
        this.addContractForm.periodUnit = this.timeArr[0].value;
        this.addContractForm.settleUnit = this.timeArr[0].value;
      } else if (mode == 2) {
        //编辑模式
        this.dialogName = "编辑合同";
      }
      //延迟执行；清空上传文件列表
      this.$nextTick(function () {
        this.$refs.uploadRef.clearFiles();
      });
      let v = this;
      //组装请求参数
      let params = {
        like: "",
        size: 200,
      };
      //请求货主名称列表
      httpApi.contractManagementApi.cargoNames(params).then(function (rsp) {
        ////console.log("rsp=", rsp);
        v.names = JSON.parse(JSON.stringify(rsp.data.data));
        v.cargoOwnerNameArr = rsp.data.data;
        //剔除没有name的数据
        for (let i = 0; i < v.cargoOwnerNameArr.length; i++) {
          // ////console.log("v.cargoCNameOps[i]="+JSON.stringify(v.cargoCNameOps[i]))
          if (
            v.cargoOwnerNameArr[i].name == null ||
            v.cargoOwnerNameArr[i].name == ""
          ) {
            ////console.log("被移除的数据=" + JSON.stringify(v.cargoOwnerNameArr[i]));
            v.$delete(v.cargoOwnerNameArr, i);
            i--;
          }
          v.cargoOwnerNameArr[i].index = i;
        }
        ////console.log("货主姓名列表获取完毕=", v.cargoOwnerNameArr);
      });
      this.visibleAddBox = true;
    },
    //更换货主名称
    changeName(id) {
      ////console.log("选中项的ID=" + id);
      this.addContractForm.cargoId = id;
    },
    //搜索名称列表
    remoteSearch(query) {
      this.cargoOwnerNameArr = [];
      this.loading = true;
      for (let item of this.names) {
        // ////console.log(JSON.stringify(item))
        //有的数据不完整，部分字段为空，因此必须判空
        if (
          item == null ||
          item == undefined ||
          item.name == null ||
          item.name == undefined
        )
          continue;
        if (item.name.indexOf(query) != -1) {
          this.cargoOwnerNameArr.push(item);
        }
      }
      this.loading = false;
      ////console.log(JSON.stringify(this.cargoOwnerNameArr));
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },


  mounted() {
    this.getList();
  },
  updated() { },
};
</script>

<style lang="scss" scoped>
.header {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 8px;

  .Btn_grounp {
    display: flex;
    // margin-left: auto;

    .searchBtn {
      width: 80px;
      height: 32px;
      color: #fff;
      font-size: 12px;
      background-color: #1890ff;
    }

    .clearBtn {
      width: 80px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      margin-left: 16px;
      margin-right: 16px;
    }
  }

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 225px);
  background-color: #fff;
  padding: 18px 30px 0 30px;

  .addBtn {
    text-align: right;
    margin-bottom: 16px;
  }

  .list {
    height: calc(100% - 48px);
    width: 100%;

    .tag {
      width: 88px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;
      margin: 0 auto;

      &.grey {
        color: #a8b0b6;
        background-color: #a8b0b6;
      }

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #1890ff;
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 341px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      height: 48px;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
        height: 48px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {

    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;

    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}

.dialog {

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 19px 20px 17px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .data_picker {
    ::v-deep .el-input__inner {
      padding-left: 30px;
      width: 100%;
    }

    // ::v-deep .el-input__prefix {
    //   //display: none;
    // }
  }

  // 上传文件
  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #fff;
      color: #000;
      font-size: 12px;
      cursor: pointer;
      border-radius: 4px;
      border-color: #ddd;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
        background-color: #ccc;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }

    ::v-deep .el-upload-list__item-name {
      padding: 7px 4px;
      color: #409eff;
      font-size: 12px;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }

    ::v-deep .el-icon-document:before {
      color: #409eff;
      font-size: 16px;
    }

    ::v-deep .el-upload-list__item .el-icon-close {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}
</style>
